<template>
  <el-dialog
      v-model="centerDialogVisible"
      :title="formTitle"
      width="80%"
      top="40px"
      destroy-on-close
      center
      @close="dialogClose">
    <div id="map" style="height: 700px"></div>
    <div class="info">
      <div class="input-serch">
        <div class="input-serch-prepend">
          <span class="input-serch-title">关键字</span>
        </div>
        <input id="tipinput" autocomplete="off" v-on:input="checkInputValue()"
               type="text">
      </div>
      <div class="searchData-box">
        <ul id="searchDataList">
        </ul>
      </div>
    </div>
    <div class="input-card w200">
      <span>编辑区域</span>
      <div class="input-item bottomButton" style="  margin-top: 30px;">
        <el-button class="affirm" @click="reset" style="width: 45.5%;height: 100%;">重新添加</el-button>
        <el-button class="affirm" @click="setPosition" style="width: 45.5%;height: 100%;">确认</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {getPointsCenter} from "@/utils/public";
import _ from "underscore";

let me;
let map;
let editor;
let polygon;
let autocompleteService;
export default {
  name: "RegionRenderingDialog",
  data() {
    return {
      formTitle: '',
      centerDialogVisible: false,
      enable: false,
      domainId: ''
    }
  },
  methods: {
    showDialog(id, pointList) {
      me = this;
      me.domainId = id
      this.centerDialogVisible = true;
      this.$nextTick(() => {
        let lng = 116.45;
        let lat = 39.93;
        let path = [];
        if (pointList.length > 0) {
          let center = getPointsCenter(pointList);
          lng = center[0];
          lat = center[1];
          path = pointList;
          me.enable = true;
        }
        this.initMap(lng, lat, path);
      });
    },
    async setPosition() {
      let path = polygon.getPath();
      console.log(path);
      let response = await this.$asyncPost("domain", {
        actionType: "domainPartition",
        pointList: path,
        domainId: me.domainId
      });
      if (response.success) {
        me.centerDialogVisible = false;
        me.$parent.selTableData();
      } else {
        this.$message.error(response.message);
      }
    },
    reset() {
      polygon.remove();
      editor.close();
      me.enable = false;
      me.$message.success('请在地图点点击选中区域初始值');
    },
    initMap(lng, lat, path) {
      var position = new LKMap.LngLat(lng, lat);
      map = new LKMap.Map("map", {
        center: position,
        zoom: 10,
        style: 'lkmap://styles/f7b8570740b54c40a5b98fdfb5d688c2',
      });
      //添加区域
      me.addpolygon(path)
      map.on('click', function (e) {
        if (me.enable) return;
        let pathData = [
          [e.lngLat.lng, e.lngLat.lat],
          [e.lngLat.lng + 0.05, e.lngLat.lat - 0.05],
          [e.lngLat.lng + 0.08, e.lngLat.lat - 0.05],
          [e.lngLat.lng, e.lngLat.lat],
        ]
        polygon.remove();
        editor.close();
        me.addpolygon(pathData)
        me.enable = true;
      });
      map.on('load', function () {
        autocompleteService = new LKMap.Autocomplete({
          size: 10,
        });
      });
    },
    addpolygon(pathData) {
      polygon = new LKMap.Polygon({
        path: pathData,
        fillOpacity: 0.4,
        fillColor: '#7C87FF',
        strokeColor: '#0037E4',
        strokeWeight: 2
      });
      polygon.setMap(map);
      editor = new LKMap.PolyEditor(map, polygon);
      setTimeout(function () {
        editor.open();
      }, 300)
    },
    addList(result) {
      let searchDataList = document.getElementById('searchDataList')
      searchDataList.innerHTML = "";
      _.forEach(result, function (item) {
        var liItem = document.createElement('li')
        liItem.onclick = function () {
          let lng = item.coordinates[0],
              lat = item.coordinates[1]
          map.setCenter({lng, lat});
          searchDataList.innerHTML = "";
          document.getElementById("tipinput").value = "";
        }
        liItem.innerHTML = item.properties.name + '<br><span>' + item.properties.label + '</span>';
        searchDataList.appendChild(liItem);
      })
    },
    // 监听输入框
    checkInputValue() {
      let searchDataList = document.getElementById('searchDataList')
      var keyword = document.getElementById("tipinput").value;
      if (keyword == "") {
        searchDataList.innerHTML = "";
      }
      autocompleteService.search(keyword, function (status, result) {
        me.addList(result);	// 渲染列表
      });
    },
    dialogClose() {
      map && map.destroy();
      map = null;
    }
  }
}
</script>

<style scoped lang="scss">

</style>